<template>
	<div>
		<div class="header" :style="headerStyle">
			<div class="title u-flex u-row-center">
				<h3 class="u-text-center titletitle">{{$t('积分中心')}}</h3>
			</div>
			<div class="u-flex u-row-between u-col-center avatarBox">
				<div class="u-flex  u-col-center ">
					<u-avatar size="large" :src="user.headimgurl"></u-avatar>
					<div class="u-m-l-20">
						<p class="score">{{user.integral}}</p>
						<p class="scoreTip"> {{$t('当前累计积分')}}</p>
					</div>
				</div>
				<p class="record u-flex u-col-center" @click="$u.route('/pagesC/integral/recordList')">
					<u-icon :name="imgStaticUrl+'/images/icon-score2.png'" color="#ff9900" size="38"></u-icon>{{$t('记录')}}
				</p>
			</div>
		</div>

		<!-- <div class="taskList">
			<div class="taskTitle u-flex u-row-between">
				<h3>{{$t('积分任务')}}</h3>
				
			</div>
			<u-read-more ref="uReadMore" show-height="600" color="#e1e1e1" :close-text="$t('查看更多')" text-indent="0">
				<view>
					<div class="taskItem u-flex u-row-between u-col-center" v-for="(item,index) in taskList"
						:key="index">
						<div class="taskleft">
							<h4 class="taskname">{{item.task_name}}
								<u-tag :text="item.tag_name" class="u-m-l-20" size="mini" type="warning" mode="light" />
							</h4>
							<p class="u-m-t-10 u-m-b-10 u-flex u-col-center">
								<u-icon :name="imgStaticUrl+'/images/icon-score2.png'" color="#ff9900" size="38"></u-icon>
								{{item.integral}} {{$t('积分')}}
							</p>
						</div>
						<div class="taskright">
							<u-button type="error" shape="circle" size="mini"
								:custom-style="item.status==2?customStyle:customStyleSuccess" @click="doTask(item)">
								{{item.status==2?$t('做任务'):$t('已完成')}}</u-button>
						</div>
					</div>
				</view>
			</u-read-more> -->

			<view class="goodsWrap u-flex ">
				<div class="goodsCard" v-for="(item,index) in goodsList" :key="index"
					@click="$u.route({url:'/pagesC/goods/goodsDetails',params:{id:item.goods_id}})">
					<u-image width="340" height="340" :src="item.goods_img" border-radius="12"></u-image>
					<h3 class="u-line-1 goodsCardname"> {{item.goods_name}}</h3>
					<p class="pricebox">
						<span class="pricebox1" v-if="item.integral_cate!==3"><span
								style="font-size: 24upx">{{$t('¥')}}</span>{{item.shop_price}}</span>
						<span class="pricebox2">{{item.integral}}{{$t('积分')}}</span>
					</p>
					<u-tag :text="item.cate_str" shape="circle" size="mini" type="warning" plain></u-tag>
					<!-- <p class="goodsCardtips" :style="{color:$u.color['tipsColor']}">{{item.buy_count}} {{$t('件已领取')}} </p> -->
				</div>

			</view>
			<u-loadmore :status="loadStatus" :icon-type="iconType" :load-text="loadText" />	
		</div>
	</div>
</template>

<script>
	export default {
		name: "index",
		data() {
			return {
				imgStaticUrl: '',
				user: {
					headimgurl: '',
					integral: '',
					user_name: ''
				},
				taskList: [],
				goodsList: [],
				customStyle: {
					"background": 'linear-gradient(45deg, rgb(0, 114, 255), rgb(119 255 255)',
					"padding": "30upx 20upx",
					"box-shadow": "0 10upx 16upx #9fddff"
				},
				customStyleSuccess: {
					"background": '#c9cbce',
					"padding": "30upx 20upx",
				},
				headerStyle: {},
				integral_info: {},
				page: 0,
				loadStatus:'loadmore',
				iconType:'flower',
				loadText:{
					loadmore:this.$t('上拉加载更多'),
					loading:this.$t('努力加载中'),
					nomore:this.$t('没有更多数据了')
				}
			}
		},
		onLoad() {
			this.imgStaticUrl = this.STATICURL;  // 线上图片地址（兼容微信小程序写法）
			this.$set(this, 'headerStyle', {
				'background': `url(${this.STATICURL}images/bg-integral.jpg)`,
				'backgroundSize': 'cover'
			})
			this.getScoreUserInfo()
			this.getScoreTaskList()
			this.getIntegralGoodsList()
		},
		onReachBottom() {
			// 上拉加载更多
			this.loadStatus='loading',
			setTimeout(()=>{
				this.getIntegralGoodsList()
			},1000)
		},
		onUnload() {
			uni.$off('openShareApp', () => {})
		},
		methods: {
			getScoreUserInfo() {
				this.$http.getScoreUserInfo().then(res => {
					if (res.status == 200) {
						this.user = res.data.user
					}

				})
			},
			getScoreTaskList() {
				this.$http.getScoreTaskList().then(res => {
					if(res.status == 200){
						this.taskList = res.data.task_list
						this.integral_info = res.data.integral_info
						this.$nextTick(() => {
							this.$refs.uReadMore.init();
						})
					}
				})
			},
			getIntegralGoodsList() {
				this.$http.getIntegralGoodsList({
					page: this.page + 1,
				}).then(res => {
					if (res.status === 200) {
						if (!res.data.goods_list.length) {
							this.loadStatus = 'nomore'
							return false
						}
						this.page = this.page	+	1
						this.goodsList.push(...res.data.goods_list)
					}
				})
			},
			doTask(item) {
				console.log(item);
				if (item.status === 1) {
					return this.$toast(this.$t('此任务已完成'))
				}
				
				let routeParams = {};
				if(item.extends){
					routeParams = JSON.parse(item.extends)
				}
				if(Object.keys(routeParams).length === 0){
					return
				}
				this.$u.route(routeParams);
				if(item.id == 2){
					uni.$emit('openShareApp', {})
				}
				return
				
			},


		}
	}
</script>

<style lang="scss" scoped>
	@import '~uview-ui/index.scss';

	page {
		background-color: #F5F5F5;
	}

	.title {
		color: #fff;
		padding: 25upx;
	}

	.header {
		background-image: linear-gradient(to right, #FF4901, #FF9400);
		position: relative;
		padding-top: var(--status-bar-height);
		position: relative;

		&title {
			font-size: 36upx;
		}

		&tip {
			position: absolute;
			right: 30upx;
		}

		&::after {
			// content: '';
			position: absolute;
			bottom: -60upx;
			width: 100%;
			background-image: inherit;
			height: 60upx;
			border-radius: 0 0 100% 100%;
			background-size: cover;
		}

		.avatarBox {
			padding: 30upx 30upx;

			.score {
				font-size: 58upx;
				font-weight: 800;
				color: #fff;
			}

			.scoreTip {
				font-size: 28upx;
				color: #ffe7d9
			}

			.record {
				color: #fff;
				background-color: #feb14d;
				padding: 6upx 14upx;
				border-radius: 100px;
			}
		}
	}

	.card {
		background-color: #fff;
		margin: 15upx;
		padding: 15upx;
		border-radius: 12upx;
	}

	.taskList {
		@extend .card;
		margin-top: 80upx;

		.taskTitle {
			color: #333;
			font-size: 30upx;
			font-weight: 600;
			margin-bottom: 30upx;
			margin-top: 30upx;
		}

		.taskItem {
			margin-bottom: 10upx;
			border-bottom: 2upx solid #f5f5f5;
			padding: 20upx;

			.taskname {
				color: #444;

			}
		}
	}

	.goodsList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.goodCard {
			width: 49%;
		}
	}

	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		position: relative;
		padding-bottom: 10upx;
	}

	.goodsWrap {
		flex-wrap: wrap;
		background-color: #F5F5F5;
		justify-content: space-between;
		margin-top: 30upx;
	}

	.goodsCard {
		flex-basis: 48%;
		width: 49%;
		margin: 15upx 0;
		padding: 15upx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 12upx;

		&tips {
			font-size: 24upx;
			margin-top: 6upx;
		}

		&name {
			color: #444;
			font-size: 30upx;
			margin: 10upx 0;
		}

		.pricebox {
			margin: 10upx 0 5upx;

			&1 {
				font-size: 38upx;
				color: #fa3f3f;
				font-weight: 800;
			}

			&2 {
				color: #ff9900;
				margin-left: 10upx;
			}
		}
	}
</style>
